<template>
  <div class="home">
    <div class="topShowTag">
      <van-cell is-link arrow-direction="down" @click="showPopup"
        >标签合集</van-cell
      >
      <van-popup v-model="showTags" position="top" :style="{ height: '80%' }"
        >内容</van-popup
      >
    </div>
    <!-- <button>点击变色</button> -->
    <!-- <van-button type="warning" @click="handleBtn">警告按钮</van-button> -->
    <div class="midText">
      <p @touchmove="touchmove" class="textInfo" selectable="true">
        <span
          v-for="item in textCard"
          :key="item.index"
          @touchstart="handleSt"
          @touchend="handleEd"
          >{{ item }}</span
        >
      </p>
    </div>
    <!-- <div contextmenu="mymenu">
      <menu type="context" id="mymenu">
        <menuitem label="Refresh"></menuitem>
        <menuitem label="Twitter"></menuitem>
      </menu>
    </div> -->
    <!-- 展示标签弹出层 -->

    <!-- <div class="cardCount">
      <div class="cardCountInfo">
        <ul ref="cardList">
          <li>已生成标签</li>
        </ul>
      </div>
    </div> -->
    <!-- <div class="ceshi" :quxiao="quxiao">dfsdfds fds dsf ds ds</div>
    <input type="text" value="22222222222222222" /> -->
    <van-dialog
      v-model="show"
      title="请选择标签"
      :beforeClose="beforeClose"
      show-cancel-button
    >
      <div class="dia">
        <van-dropdown-menu class="menu">
          <van-dropdown-item v-model="value1" :options="option1" />
        </van-dropdown-menu>
      </div>
    </van-dialog>
  </div>
</template>
<script>

export default {
  data() {
    return {
      textCard:"我不想用我黑色的眼睛看到的世界、在他们眼里确实蓝色的。我不想用我黑色的眼睛看到的世界、在他们眼里确实蓝色的。",
      textCardInner:"",
      startX:'',
      startY:'', 
      distanceX:'',
      distanceY:'',
      show:false,
       value1: 0,
      option1: [
        { text: '愤怒', value: 0 },
        { text: '开心', value: 1 },
        { text: '哀怨', value: 2 },
        { text: '高兴', value: 3 },
      ],
      count:0,
      countLi:0,
      current:0,
      list:[],
      cardList:[],
      /* cssList:['#07c160','#1989fa','#ee0a24','#ff976a'], */
      cssList:['red','pink','red','pink'],
      //删除次数
      removeTime:0,
      rightOrdown:true,
      //tag弹出层控制
      showTags:false,
    }
  },
  created() {
window.removeCardItem= this.removeCardItem;
  },
  methods:{
    quxiao(e){
      e.preventDefault();
      
    },
    backBtn() {
      //获取I标签
      /* let oDiv2 = document.querySelector("i");
      console.log(oDiv2);
      oDiv2.removeclass
      oDiv2.innerHTML=oDiv2.innerHTML.replace(/<\/?span>/g,'');
      console.log(oDiv2); */
    },
    
    handleSt(e) {
     /*  e.target.style.borderLeft="medium solid #F8B3D0"
      console.log(e.target.style); */
      this.startX= e.changedTouches[0].pageX;
      this.startY=e.changedTouches[0].pageY;
      console.log('this.startX:'+this.startX,'this.startY'+this.startY,document.querySelector("span").offsetTop);
    },
    handleEd(e) {
      
      console.log("进来了");
      console.log(this.textCardInner);
          /* this.$dialog.confirm({
      title: '<van-button type="warning" @click="handleBtn">警告按钮</van-button>',
      message: '弹窗内容',
      theme: 'round-button',
      }).then(() => {
        
      }).catch(() => {

      }); */
      //if (Math.abs(this.distanceX)>Math.abs(this.distanceY) && this.distanceX>=5&&this.distanceY<50&&this.distanceY>-50||this.distanceY>0) {

      //向右滑动或者向下滑动
      if (this.list[this.count].length) {
        this.show=true
      }else {
        this.show=false
        /* this.$toast.fail({
        message: '请往右或者下方选中文字',
        forbidClick: true,
      }); */
      }

        this.distanceX=0;
        this.distanceY=0
    },
    removeCardItem(count) {
    console.log(count);
    for (let i = 0; i < this.list[count].length; i++) {
     this.list[count][i].style.backgroundColor='#fff'
     
    }
    //删除父元素
    document.querySelectorAll("li")[count+1].classList.add('out')
    this.list.splice(count,1,[])
    console.log(this.list);
    /* this.count-- */
  },
    touchmove(e) {
      console.log(e.targetTouches[0].pageX);
      console.log(document.querySelectorAll("p>span")[5].offsetLeft);
      
      //判断向左还是向右
      let endX = e.changedTouches[0].pageX;
   let endY = e.changedTouches[0].pageY;
    //获取滑动距离
     this.distanceX =endX -this.startX;
   this.distanceY = endY-this.startY;
    //判断滑动方向
    if(Math.abs(this.distanceX)>Math.abs(this.distanceY) && this.distanceX>0&&this.distanceY<20&&this.distanceY>-20){
      console.log("向右滑动");
        /* for (let index = 0; index < document.querySelectorAll("p>span").length; index++) {
        if ( document.querySelectorAll("p>span")[index].offsetLeft<=e.targetTouches[0].pageX&&document.querySelectorAll("p>span")[index].offsetLeft>=this.startX-40&&document.querySelectorAll("p>span")[index].offsetTop>(this.startY-20)&&document.querySelectorAll("p>span")[index].offsetTop<(this.startY+20)) {
          document.querySelectorAll("p>span")[index].style.backgroundColor = 'skyblue'
        }else {
          document.querySelectorAll("p>span")[index].style.backgroundColor = '#fff'
        } 
      }*/
      //筛选出不满足条件的所有标签

      //满足条件的所有标签变色
      console.log("this.startY:",this.startY);
       if (Array.from(document.querySelectorAll("p>span"))) {
         this.list[this.count] =Array.from(document.querySelectorAll("p>span")).filter((item)=>{
        return item.offsetLeft<=e.targetTouches[0].pageX&&item.offsetLeft>=this.startX-32&&item.offsetLeft<=endX-20&&item.offsetTop>(this.startY-20)&&item.offsetTop<(this.startY)
      })
      
      if ((Math.abs(this.distanceY)>0.05||Math.abs(this.distanceX)>0.05)&&this.list.length!=0) {
        let already =false;
        for (let k = 0; k < document.querySelectorAll("p>span").length; k++) {
            document.querySelectorAll("p>span")[k].style.backgroundColor='#fff'
            already=true
          }
        if (already) {
          for (let i = 0; i < this.list.length; i++) {
          this.textCardInner="";
          for (let j = 0; j < this.list[i].length; j++) {
          this.list[i][j].style.backgroundColor='skyblue'
          this.textCardInner+=this.list[i][j].innerHTML
        }
      }
        }
     }
       /* let already =false;
        for (let k = 0; k < document.querySelectorAll("p>span").length; k++) {
            document.querySelectorAll("p>span")[k].style.backgroundColor='#fff'
            already=true
          }
        if (already) {
          for (let i = 0; i < this.list.length; i++) {
          this.textCardInner="";
          for (let j = 0; j < this.list[this.count].length; j++) {
          this.list[this.count][j].style.backgroundColor='skyblue'
          this.textCardInner+=this.list[this.count][j].innerHTML
        }
      }
        }
     } */
      console.log(this.list);
       }
    }else if(Math.abs(this.distanceX)>Math.abs(this.distanceY) && this.distanceX<0&&this.distanceY<20&&this.distanceY>-20){
      console.log("向左滑动");
      /*  for (let index = 0; index < document.querySelectorAll("p>span").length; index++) {
        if ( document.querySelectorAll("p>span")[index].offsetLeft>=e.targetTouches[0].pageX&&document.querySelectorAll("p>span")[index].offsetLeft<=this.startX) {
          document.querySelectorAll("p>span")[index].style.backgroundColor = 'skyblue'
        }else{
          document.querySelectorAll("p>span")[index].style.backgroundColor = '#fff'
        }
      } */
       if (this.list[this.count]) {
        this.list[this.count]=[]
      }
      /* for (let i = 0; i < document.querySelectorAll("p>span").length; i++) {
        document.querySelectorAll("p>span")[i].style.borderLeft="thin none #fff"
      } */
    }else if(this.distanceY<0){

      console.log("向上");
      if (this.list[this.count]) {
        this.list[this.count]=[]
      }
      /* for (let i = 0; i < document.querySelectorAll("p>span").length; i++) {
        document.querySelectorAll("p>span")[i].style.borderLeft="thin none #fff"
      } */

    }else if(this.distanceY>20){
      console.log("向下滑动xia");
      //优化1：判断offetsettop-offsetHight即底部与this.starY的高度从而更加精准
      //优化2：删除标签时不再是仅仅将其隐藏，而且要清空this.list否则就会出现交集,之前的就不能再选了
      //优化3，

      //往下 取开始位置y轴距离小于20，x轴坐标大于开始位置的当前轴所有span，2：加上Y轴offsettop减去开始top的距离所有小于distanceY的span，然后再进行一次筛选，筛选出offX位置大于当前触摸坐标X，并且
      /* this.list[this.count] =Array.from(document.querySelectorAll("p>span")).filter((item)=>{
          return item.offsetTop<=e.targetTouches[0].pageY
      })
      console.log(this.list[this.count]); */
      /*  */
      //第一区域starY上下相隔20px的区域，筛选出大于starX的所有span
      //item.offsetTop>(this.startY-20)&&item.offsetTop<(this.startY)
      let part1,part2,part3=[];
      part1 =Array.from(document.querySelectorAll("p>span")).filter((item)=>{
        return item.offsetTop<this.startY&&item.offsetTop>=(this.startY-20)&&(item.offsetLeft>=(this.startX-32))
        /* item.offsetTop<=(this.startY+16)&&item.offsetTop>=(this.startY-10)&&(item.offsetLeft>(this.startX-20)) */
      })
      part2 =Array.from(document.querySelectorAll("p>span")).filter((item)=>{
        return item.offsetTop<=(endY)&&item.offsetTop>=(endY-20)&&(item.offsetLeft<=(endX-20))
      })
      if (this.distanceY>30) {
        part3=Array.from(document.querySelectorAll("p>span")).filter((item)=>{
        return item.offsetTop>=(this.startY)&&item.offsetTop<(endY-20)
      })
      }
      if (part3.length) {
        this.list[this.count]=[...part1,...part3,...part2];
      }else{
        this.list[this.count]=[...part1,...part2];
      }
      /* this.list[this.count][this.list[this.count].length-1].style.borderRight="thick solid #F8B3D0"
      setInterval(this.list[this.count][this.list[this.count].length-1].style.borderRight="thick none #F8B3D0", 1000) */
      /* this.list[this.count][this.list[this.count].length-1].style.fontSize="larger" */
      console.log(this.list[this.count]);
      /* console.log(this.list[this.count]); */
    }else{
      if (this.list[this.count]) {
        this.list[this.count]=[]
      }
      /* for (let i = 0; i < document.querySelectorAll("p>span").length; i++) {
        document.querySelectorAll("p>span")[i].style.borderLeft="thin none #fff"
      } */
        console.log('点击未滑动')
    };
    if ((Math.abs(this.distanceY)>0.05||Math.abs(this.distanceX)>0.05)&&this.list.length!=0) {
        let already =false;
        for (let k = 0; k < document.querySelectorAll("p>span").length; k++) {
            document.querySelectorAll("p>span")[k].style.backgroundColor='#fff'
            already=true
          }
        if (already&&this.list.length) {
          for (let i = 0; i < this.list.length; i++) {
          this.textCardInner="";
          for (let j = 0; j < this.list[i].length; j++) {
          this.list[i][j].style.backgroundColor='skyblue'
          this.textCardInner+=this.list[i][j].innerHTML
        }
      }
        }
     }
  },
  //数组去重
   unique (arr) {
  return Array.from(new Set(arr))
},
    
    handleBtn(e) {
      /* this.replaceSelectedStrByEle('nite-writer-pen'); */
      /* console.log(e.target);
      e.target.style.backgroundColor = 'skyblue' */
    },
    /* choseText() {
      let tObj = document.getElementById(item.id);
      this.$nextTick(function () {
        if (item.value != undefined) {
          let sPos = item.value.length;
          if (tObj.setSelectionRange) {
            tObj.setSelectionRange(sPos, sPos);
            tObj.focus();
          }
        } else if (tObj.createTextRange) {
          let rng = tObj.createTextRange();
          rng.move("character", sPos);
          rng.select();
        }
      });
    }, */
    
   /* replaceSelectedStrByEle(className){
  var selecter = window.getSelection();
  var selectStr = selecter.toString();
  if (selectStr.trim != "") {
    var rang = selecter.getRangeAt(0);
    var ele = document.createElement("i");
    ele.className = className;
    ele.textContent = selectStr
    rang.surroundContents(ele);
  }
}, */
beforeClose(e,so) {
    if (e==="confirm") {
      //判断是否有交集，如果有报错并且还原
      
      let newCard = document.createElement("li")
      newCard.innerHTML=this.option1[this.value1].text+`<button onclick="removeCardItem(${this.count})">删除</button>:&nbsp${this.textCardInner}`
      /* newCard.setAttribute(`attr_name${this.count}`,'attr_value') */
      this.$refs['cardList'].appendChild(newCard)
      /* this.list[this.count][i].style.backgroundColor=this.cssList[this.value1]; */
      
      this.count++;
      so()
      this.value1=0
    }else if(e==="cancel") {
      console.log(2);
      for (let i = 0; i <this.list[this.count].length; i++) {
        this.list[this.count][i].style.backgroundColor='#fff'
      }
      so()
      this.value1=0
    }
  },
    showPopup() {
      this.showTags = true;
    },
  },
}
</script>
<style lang="less" scope>
.home {
  position: fixed;
  top: 0;
  bottom: 0;
  right: 18px;
  left: 18px;
  //顶部展示标签
  .topShowTag {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    padding-bottom: 1px;
    z-index: 1;
  }
  .midText {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    background-color: pink;
    z-index: 0;
    bottom: 200px;
    p {
      padding-top: 100px;
      line-height: 50px;
      margin-left: 16px;
      width: 100%;
      text-align: left;
      touch-callout: none;
      -webkit-touch-callout: none;
      -ms-touch-callout: none;
      -moz-touch-callout: none;
      -webkit-user-select: text;
      -moz-user-select: text;
      -ms-user-select: text;
      user-select: text;
      position: absolute;
      touch-action: none;
      span {
        display: inline-block;
        padding: 0 10px;
        box-sizing: content-box;
        font-size: 32px;
      }
    }
    p::before {
      content: "";
      display: inline-block;
      width: 1.37rem;
      height: 36px;
    }
  }
  .out {
    position: absolute;
    left: -5000px;
  }
  .custom-underline {
    border-bottom: 1px solid #f00;
    font-style: normal;
  }
  .nite-writer-pen {
    background-color: lightgreen;
    border-radius: 5px;
    box-shadow: 0 0 10px lightgreen;
    font-style: normal;
  }
  .dia {
    height: 500px;
    /* display: flex;
  justify-content: space-around; */
  }
  .menu {
    z-index: 10000;
  }
  .cardCount {
    position: absolute;
    padding-top: 400px;
    left: 0;
    right: 0.5rem;
    background-color: pink;
    bottom: 0px;
    .cardCountInfo {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      ul {
        width: 100%;
        box-sizing: border-box;
        text-align: center;
        overflow: scroll;
        li {
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }
      }
    }
  }
}
html {
  touch-action: none;
}
</style>
